<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header />
      <Content :todoList="todoList" />
      <Footer />
    </div>
  </div>
</template>
<script>
// 引入组件
import Header from './components/Header';
import Content from './components/Content';
import Footer from './components/Footer';
// 引入 nonoid 插件
import { nanoid } from 'nanoid';
export default {
  name: 'App',
  components: {
    Header,
    Content,
    Footer,
  },
  data() {
    return {
      todoList: [
        { id: nanoid(), todo: '吃饭', done: false },
        { id: nanoid(), todo: '睡觉', done: false },
        { id: nanoid(), todo: '打豆豆', done: false },
      ],
    };
  },
};
</script>
<style></style>
